<template>
  <div id="article">
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>文章列表页面</span>
  </div>
  <div  class="text item">
    <el-form ref="searchFormRef" :model="searchForm" label-width="100px">
      <el-form-item label="文章状态" >
        <el-radio-group v-model="searchForm.status" @change="getContent()">
        <el-radio label="">全部</el-radio>
        <el-radio label="0">草稿</el-radio>
        <el-radio label="1">待审核</el-radio>
        <el-radio label="2">审核通过</el-radio>
        <el-radio label="4">已删除</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item label="频道列表">
        <el-select v-model="searchForm.channel_id" clearable placeholder="请选择" @change="getContent()">
         <el-option v-for="item in datalist" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间选择">
        <el-date-picker
      value-format="yyyy-MM-dd"
       v-model="timetotime"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']">
    </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</el-card>
<el-card class="box-card" style="margin-top:20px">
  <div slot="header" class="clearfix">
    <span>找到{{num}}条复合数据的内容</span>
  </div>
  <div  class="text item">
  <el-table :data="getArticleList" style="width:100%;">
  <el-table-column label="图标" >
    <img :src="stData.row.cover.images[0]" alt="没有找到图片" slot-scope=" stData" width="200px" height="200px">
  </el-table-column>
  <el-table-column label="标题" prop="title" width=""></el-table-column>
  <el-table-column label="状态" prop="status" width="">
    <template slot-scope="stData">
      <el-tag type="success" v-if="stData.row.status===0">草稿</el-tag>
      <el-tag type="info" v-else-if="stData.row.status===1">待审核</el-tag>
      <el-tag type="warning"  v-else-if="stData.row.status===2">审核通过</el-tag>
    </template>
  </el-table-column>
  <el-table-column label="发布时间" prop="pubdate" width=""></el-table-column>
  <el-table-column label="操作">
  <template slot-scope="stData">
    <el-button type="primary" size="mini" @click="$router.push(`/articledit/${stData.row.id}`)"">修改</el-button>
     <el-button type="danger" size="mini" @click="del(stData.row.id)">删除</el-button>
  </template>
  </el-table-column>
</el-table>
  </div>
 <div class="text item">
   <el-pagination
   style="margin-top:30px"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="searchForm.page"
  :page-sizes="[10, 15, 20, 40]"
  :page-size="searchForm.per_page"
  layout="total, sizes, prev, pager, next, jumper"
  :total="Number(num)"
></el-pagination>
</div>
</el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.getList()
    this.getContent()
  },

  name: 'ArticleList',
  data () {
    return {
      timetotime: [],
      searchForm: {
        status: '',
        channel_id: '',
        begin_pubdate: '',
        end_pubdate: '',
        page: 1, // 默认获取第1页数据
        per_page: 10 // 每页返回10条记录
      },
      datalist: [],
      getArticleList: [],
      num: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      this.searchForm.per_page = val
      this.getContent()
    },
    handleCurrentChange (val) {
      console.log(val)
      this.searchForm.page = val
      this.getContent()
    },
    del (id) {
      let pro = this.$http.delete(`/articles/${id}`)
      pro.then(result => {
        this.getContent()
      }).catch(error => {
        this.$message.error('出错了' + error)
      })
    },
    getList () {
      let pro = this.$http.get('/channels')
      pro.then(result => {
        let { data } = result.data

        this.datalist = data.channels
      }).catch(error => {
        this.$message.error('出错了' + error)
      })
    },
    getContent () {
      let searchData = {}
      for (var i in this.searchForm) {
        // i:代表对象的成员属性名称, status、channel_id、begin_pudate等等
        if (this.searchForm[i]) {
          // 成员值非空
          searchData[i] = this.searchForm[i]
        }
      }
      let pro = this.$http.get('/articles', { params: searchData })
      pro.then(result => {
        if (result.data.message === 'OK') {
          this.getArticleList = result.data.data.results
          this.num = result.data.data.total_count
        }
      }).catch(error => {
        this.$merage.error('错了' + error)
      })
    }
  },
  watch: {
    timetotime: function (newv, oldv) {
      if (newv) {
        this.searchForm.begin_pubdate = newv[0]
        this.searchForm.end_pubdate = newv[1]
      }
      this.getContent()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
